<!DOCTYPE html>
<html>
<head>
   <link href="build/classic/theme-gray/resources/theme-gray-all.css" rel="stylesheet" />
   <script type="text/javascript" src="build/ext-all.js"></script>
   <script type="text/javascript">
   var gridStore;
       // Creation of data model
      Ext.define('StudentDataModel', {
         extend: 'Ext.data.Model',
         fields: [
         {name: 'name', type:'string',mapping : 'name'},
         {name: 'age', type:'int',mapping : 'age'},
         {name: 'marks',type:'float', mapping : 'marks'}
         ]
      });

      Ext.onReady(function(){
        
         // Creation of first grid store
         gridStore = Ext.create('Ext.data.Store', {
         model: 'StudentDataModel',
         proxy: {
                 type: 'ajax',
                 url : 'http://localhost:3000/users'
                 //,reader:{type:'json',root:'users',totalProperty:'total'}
             },
         //如果有了model,就不必再使用reader???
         // reader : new Ext.data.JsonReader({  
         //          // 读取方式按照json字符串格式读取  
         //          type : 'json',  
         //          // json解析成js对象之后读取所有数据（通常是数组）的属性名称。  
         //          root : 'root',  
         //          // json解析成js对象之后读取数据总条数的属性名称  
         //          totalProperty : 'totalProperty'  
         //      },Ext.data.Record.create([  
                     //{name: 'name', type:'string',mapping : 'name'},
                     //{name: 'age', type:'int',mapping : 'age'},
                     //{name: 'marks',type:'float', mapping : 'marks'}
  
                  //])) 


         //autoLoad: true //可以使用store.load()取代
         });
         gridStore.load({params:{start:0, limit:10}});

         // Creation of first grid
         Ext.create('Ext.grid.Panel', {
            id                : 'gridId',
            store             : gridStore,
            stripeRows        : true,
            title             : 'Students Grid', // Title for the grid
            renderTo          :'gridDiv', // Div id where the grid has to be rendered
            width             : 600,
            collapsible       : true, // property to collapse grid
            enableColumnMove  :true, // property which alllows column to move to different position by dragging that column.
            enableColumnResize:true, // property which allows to resize column run time.
            columns           :
               [{ 
                  header: "Student Name",
                  dataIndex: 'name',   
                  id : 'name',    
                  flex:  1,       // property defines the amount of space this column is going to take in the grid container with respect to all.  
                  sortable: true, // property to sort grid column data. 
                  hideable: true  // property which allows column to be hidden run time on user request.
               },{
                  header: "Age", 
                  dataIndex: 'age',
                  flex: .5, 
                  sortable: true,
                   hideable: false // this column will not be available to be hidden.
               },{
                  header: "Marks",
                  dataIndex: 'marks',
                  flex: .5, 
                  sortable: true, 
                  // renderer is used to manipulate data based on some conditions here who ever has marks greater than 75 will be displayed as 'Distinction' else 'Non Distinction'.
                  renderer :  function (value, metadata, record, rowIndex, colIndex, store) {
                     if (value > 75) {
                        return "Distinction";     
                     } else {
                        return "Non Distinction";
                     }
                  }
            }]
         });
      });
   </script>
</head>
<body>
   <div id = "gridDiv"></div>
</body>
</html>